﻿@page
@{
    ViewBag.Title = "Click";
}
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>Clickable Cells</h2>
        <table id="clickable-cells-table" class="table table-hover">
            <tbody>
                @for (int i = 0; i < 3; i++)
                {
                    <tr>
                        @for (int j = 0; j < 3; j++)
                        {
                            <td onclick="incrementInnerTextValue(this)">0</td>
                        }
                    </tr>
                }
            </tbody>
        </table>

        <h2>Double Clicks</h2>
        <div>
            <label for="double-click-block">Count: </label>
            <span id="double-click-block" ondblclick="incrementInnerTextValue(this)" style="background-color: lightcyan; border: 1px solid lightblue; padding: 4px 12px;">0</span>
        </div>

        <h2>Right Clicks</h2>
        <div>
            <label for="right-click-block">Count: </label>
            <span id="right-click-block" oncontextmenu="incrementInnerTextValue(this); return false;" style="background-color: lightcyan; border: 1px solid lightblue; padding: 4px 12px;">0</span>
        </div>
    </div>
</div>

<script>
    function incrementInnerTextValue(element) {
        element.innerText = parseInt(element.innerText) + 1;
    }
</script>
